﻿@page "/datagrid/aggregate"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates aggregate functionality of the DataGrid. In this sample, the aggregate value for the column Freight is displayed in column footer.</p>
</SampleDescription>
<ActionDescription>
   <p>The DataGrid supports aggregates which will be displayed at the footer, group footer, and group caption of the DataGrid. The aggregate configurations can be provided in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridAggregates.html'>GridAggregates</a></code> component.</p>
   <p>The built-in aggregates are, </p>
   <ul> <li><strong>Sum</strong></li>    
        <li><strong>Average</strong></li>    
        <li><strong>Min</strong></li>    
        <li><strong>Max</strong></li>    
        <li><strong>Count</strong></li>    
        <li><strong>TrueCount</strong></li>    
        <li><strong>FalseCount</strong></li>
     </ul>  
     <p>In this demo, the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate'>FooterTemplate</a></code> is used to display four different aggregates in the DataGrid footer. In the first aggregate row, the <strong>Sum</strong> aggregate type is used by setting it in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type'>Type</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field'>Field</a></code> property is set as <strong><i>Freight</i></strong> which will be used to perform the aggregation. The aggregate value is accessed inside the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~FooterTemplate.html'>FooterTemplate</a></code> using its <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Type.html'>Type</a></code> name (<strong>SumValue.Sum</strong>) where <b>SumValue</b> is an implicit named parameter - <b>Context</b>. The aggregate value will be formatted based on its <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Format'>Format</a></code> value(<strong><i>C2</i></strong>) before being displayed.</p>
     <p>More information on the Aggregates can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/aggregates/'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData">
                <GridAggregates>
                    <GridAggregate>
                        <GridAggregateColumns>
                            <GridAggregateColumn Field=@nameof(OrdersDetails.Freight) Type="AggregateType.Sum"  Format="C2">
                                <FooterTemplate>
                                    @{
                                        var Sumvalue = (context as AggregateTemplateContext);
                                        <div>
                                            Sum: @Sumvalue.Sum
                                        </div>
                                    }
                                </FooterTemplate>
                            </GridAggregateColumn>
                        </GridAggregateColumns>
                    </GridAggregate>
                    <GridAggregate>
                        <GridAggregateColumns>
                            <GridAggregateColumn Field=@nameof(OrdersDetails.Freight) Type="AggregateType.Average"  Format="C2">
                                <FooterTemplate>
                                    @{
                                        var Avgvalue = (context as AggregateTemplateContext);
                                        <div>
                                            Average: @Avgvalue.Average
                                        </div>
                                    }
                                </FooterTemplate>
                            </GridAggregateColumn>
                        </GridAggregateColumns>
                    </GridAggregate>
                </GridAggregates>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="140"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords().Take(12).ToList();
    }
}
